<template>
    <div class="xtx-city" ref="target">
        <div class="select" @click="toggleDialog" :class="{active:visiable}">
            <span v-if="!fullLocation" class="placeholder">请选择配送地址</span>
            <span v-else class="value"> {{ fullLocation }} </span>
            <i class="iconfont icon-angle-down"></i>
        </div>
        <div class="option" v-if="visiable">
            <span class="ellipsis" @click="changeItem(city)" v-for="city,i in currentCityList" :key="i">{{
                city.name
            }}</span>
        </div>
    </div>
</template>
<script>
import { computed, reactive, ref } from 'vue'
import { onClickOutside } from '@vueuse/core';
import axios from 'axios';
export default {
    name: "XtxCity",
    props: {
        fullLocation: {
            type: String,
            default: ''
        },
        placeholder: {
            type: String,
            default: '请选择配送地址'
        }
    },
    setup(props, { emit }) {
        const loading = ref(null)
        const visiable = ref(false)
        const target = ref(null)
        const allCityData = ref([])
        const open = () => {
            visiable.value = true
            loading.value = true
            getCity().then(res => {
                allCityData.value = res
                loading.value = false
            })
            //清除 列表数据
            for (const key in cityObject) {
                cityObject[key] = ''
            }
        }
        const close = () => {
            visiable.value = false
        }

        const toggleDialog = () => {
            visiable.value ? close() : open()
        }

        onClickOutside(target, (ele) => {
            close()
        })

        //城市对象
        const cityObject = reactive({
            provinceCode: '',
            provinceName: '',
            cityCode: '',
            cityName: '',
            countyCode: '',
            countyName: '',
            fullLocation: ''
        })
        const currentCityList = computed(() => {
            //省级
            let list = allCityData.value
            //市级
            if (cityObject.provinceCode) {
                list = list.find(item => item.code === cityObject.provinceCode).areaList
            }
            //区级
            if (cityObject.cityCode) {
                list = list.find(item => item.code === cityObject.cityCode).areaList
            }
            return list
        })
        //选择城市的逻辑
        const changeItem = (item) => {
            if (item.level === 0) {
                //省级
                cityObject.provinceCode = item.code
                cityObject.provinceName = item.name
            }
            if (item.level === 1) {
                //市级
                cityObject.cityCode = item.code
                cityObject.cityName = item.name
            }
            // 地区
            if (item.level === 2) {
                cityObject.countyCode = item.code
                cityObject.countyName = item.name
                cityObject.fullLocation = `${cityObject.provinceName} ${cityObject.cityName} ${cityObject.countyName}`
                emit('change', cityObject)

                close()
            }
        }
        return {
            toggleDialog,
            visiable,
            target,
            loading,
            allCityData,
            changeItem,
            currentCityList
        }

    }
}
//https://yjy-oss-files.oss-cn-zhangjiakou.aliyuncs.com/tuxian/area.json
const getCity = () => {
    //返回Promise
    return new Promise((resolve, reject) => {
        if (window.cityData) {
            resolve(window.cityData)
        } else {
            const url = 'https://yjy-oss-files.oss-cn-zhangjiakou.aliyuncs.com/tuxian/area.json'
            axios.get(url).then(res => {
                window.cityData = res.data
                resolve(window.cityData)
            })
        }
    })
}
</script>

<style scoped lang="less">
.xtx-city {
    display: inline-block;
    position: relative;
    z-index: 400;

    .select {
        border: 1px solid #e4e4e4;
        height: 30px;
        padding: 0 5px;
        line-height: 28px;
        cursor: pointer;

        &.active {
            background: #fff;
        }

        .placeholder {
            color: #999;
        }

        .value {
            color: #666;
            font-size: 12px;
        }

        i {
            font-size: 12px;
            margin-left: 5px;
        }
    }

    .option {
        width: 542px;
        border: 1px solid #e4e4e4;
        position: absolute;
        left: 0;
        top: 29px;
        background: #fff;
        min-height: 30px;
        line-height: 30px;
        display: flex;
        flex-wrap: wrap;
        padding: 10px;

        >span {
            width: 130px;
            text-align: center;
            cursor: pointer;
            border-radius: 4px;
            padding: 0 3px;

            &:hover {
                background: #f5f5f5;
            }
        }
    }
}
</style>